<template>
  <div class="SwiperVideo">
    <swiper 
      :slides-per-view="2" 
      :space-between="16"
      navigation
      loop
      :coverflowEffect="swiperOptions.coverflowEffect"
      :centeredSlides="swiperOptions.centeredSlides"
      :centeredSlidesBounds="swiperOptions.centeredSlidesBounds">
      <swiper-slide v-for="item in list" :key="item" class="video-container">
        <video :src="item.url" controls></video>
        <!-- <div class="video-play-overlay">
          <svg-icon icon-class="play"></svg-icon>
        </div> -->
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css';
import 'swiper/less/navigation';
import 'swiper/less/pagination';

const props = defineProps({
  list: Array,
});

let swiperOptions = reactive({
  centeredSlides: true,
  centeredSlidesBounds: true,
  coverflowEffect: {
    rotate: 0, //slide做3d旋转时Y轴的旋转角度。默认50。
    stretch: 21, //每个slide之间的拉伸值（距离），越大slide靠得越紧。 默认0。
    depth: 350, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
    modifier: 1.1, //depth和rotate和stretch的倍率，相当于            depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    slideShadows: false, //开启slide阴影。默认 true。
  }
});

</script>

<style lang="less" scoped>
.swiper {
  overflow: unset;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;

  .video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.3s;
    cursor: pointer;
    font-size: 48px;
    &:hover{
      opacity: 1;
    }
  }
}

video {
  width: 100%;
  height: 100%;
}
</style>

